<template>
  <!-- {
    "id": 10,
    "createUserId": null,
    "knowledgeId": 3,
    "type": 1,
    "title": "2/0可行吗",
    "index": null,
    "defaultScore": 1153,
    "difficulty": 5,
    "expend": []
} -->
  <!-- {
  "id": 19,
  "answer": "1",
  "examId": 1,
  "questionId": 1,
  "studentId": 1,
  "score": 0,
  "result": 0
} -->
  <div v-loading="formLoading" style="line-height: 1.8">
    <h3>第 {{ index }} 题</h3>
    <div>
      <div class="q-title" v-html="answer.title" />
      <div>
        <div class="q-result" v-html="'学生答案：' + answer.result" />
      </div>
      <div>
        <div class="q-answer" v-html="'标准答案：' + answer.answer" />
      </div>
      <div>
        <div class="q-explanation" v-html="'解析：' + answer.explanation" />
      </div>
    </div>
    <el-row class="do-align-center"
      ><el-input-number
        v-model="answer.score"
        :min="0"
        label="分数"
      ></el-input-number
      ><span> | </span
      ><el-button type="primary" @click="submitScore">提交评分</el-button>
    </el-row>
  </div>
</template>

<script>
import {
  attendExam,
  commitPractice,
  markAnswer,
  getExams,
  finishExam,
  getScores,
  getAnswers,
  getScore,
} from "@/api/exam";
export default {
  name: "QuestionShow",
  props: {
    answer: {
      type: Object,
      default: function () {
        return { id: null, result: "", completed: false };
      },
    },
    index: {
      type: Number,
      default: 0,
    },
  },
  data(){
    return{formLoading: false,}
  },
  methods: {
    submitScore() {
      let _this = this
      console.log(this)
      if (
        _this.answer.id &&
        // _this.answer.score &&
        parseInt(_this.answer.id) !== 0 //&&
        // parseInt(_this.answer.score) >= 0
      ) {
        _this.formLoading = true;
        markAnswer({ id: _this.answer.id, score: _this.answer.score })
          .then((res) => {
            console.log("res", res);
            // if (!res.records) {
            //   _this.$alert("id错误", {
            //     confirmButtonText: "返回首页",
            //     callback: (action) => {
            //       _this.$router.push("/paper");
            //     },
            //   });
            // } else {
            //   _this.form.records = res.records;
            _this.formLoading = false;
            _this.$message.success("评分成功");
            // }
          })
          .catch((e) => {
            _this.$message.error("出现未知错误");
          });
      } else {
        _this.$message.error("id错误");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.q-result,
.q-answer,
.q-explanation {
  background-color: #ebeb93;
  padding: 10px;
  border-radius: 20px;
  text-indent: 10px;
  margin-bottom: 10px;
}
.q-answer {
  background-color: #97eb93;
}
.q-explanation {
  background-color: #93c9eb;
}
</style>
